<template>
  <div class="view-wait-pay">
    <div>
      <h1>需支付: {{payAmount}}元</h1>
      
      <div class="payWay">支付方式</div>
      <div class="line"></div>
        <div class="payment flex1">
          <div class="payment-label">
            <img class="icon" src="/static/images/weixin-pay.png">
            <span class="text">微信支付</span>
          </div>
          <div class="but">
            <img class="select" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/selected.png">
          </div>
        </div>
    </div>
    <div class="fix-btn">
      <button class="btn pass" @click="payment">确定支付</button>
    </div>

  </div>
</template>

<script>
  import Service from '@/utils/service'
  import {showToast} from '@/utils/index'

  export default {
    data() {
      return {
        payAmount: null,
      }
    },
    onUnload() {
    },
    onLoad(options) {
      this.payAmount = JSON.parse(options.payAmount)
    },
    methods: {
      payment() {
        let _this = this
        if (!_this.payAmount) {
          showToast('请选择您要购买的金额');
          return
        }
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
            if (res.code) {
              let data = {code: res.code}
              Service.jscode2session(data).then((res) => {
                if (res) {
                  let data = {
                    payMethod: '1',//微信
                    paymentType: '3',//蜜币
                    payAmount: _this.payAmount,
                    openId: res.openid
                  }
                  Service.prePay(data).then((res) => {
                    if (res.code == 200) {
                      let payParam = res.data
                      wx.requestPayment({
                        timeStamp: res.data.timeStamp + '',
                        nonceStr: res.data.nonceStr + '',
                        package: res.data.package + '',
                        signType: 'MD5',
                        paySign: res.data.sign + '',
                        success(res) {
                          wx.showToast({
                            title: '充值成功',
                            icon: 'success',
                            duration: 2000
                          });
                          setTimeout(()=> {
                            wx.switchTab({
                              url: '/pages/myself/main'
                            })
                          },200)
                        },
                        fail(res) {
                          _this.disable = false
                          showToast('充值失败');
                        }
                      })
                    }
                  })
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
.top {
    padding: 0 3%;
    height: 178px;
    margin: 10px auto 20px;
    text-align: center;
  }
  .topline{
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48%;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .img1 {
    margin-right: 5px;
    float: left;
    width: 80px;
    height: 80px;
  }

  .img2 {
    margin-right: 10px;
    float: left;
    width: 80px;
    height: 80px;
  }
  .flex1 {
    justify-content: space-between;
  }
  .right-text {
    text-align: left;
  }

  .tx1 {
    display: block;
    font-size: 32px;
    font-weight: 500;
    color: #523A24;
    line-height: 30px;
    /* display: inline-block; */
  }

  .tx2 {
    font-size: 24px;
    color: #999;
    margin-top: 20px
  }
  .payWay {
    padding-left: 3%;
    margin: 50px 0;
    color: #999;
    font-size: 32px;
  }
.daizf{
  margin-top: 40px
}
.borderline{
  width:100%;
  border-top: 2px solid #ddd

}
  .view {
    padding: 50px 50px 170px 50px;
    text-align: center;
  }

  .img3 {
    width: 176px;
    height: 152px;
    margin-top: 253px;
    margin-bottom: 36px;
  }

  h1 {
    line-height: 100px;
    font-size: 38px;
    padding-left: 3%;
    text-align: left;
    margin: 20px 0 30px;
  }

  .flex1 {
    justify-content: space-between;
    font-size: 30px;
    font-family: PingFangSC-Regular;
    color: rgba(102, 102, 102, 1);
    line-height: 42px;
  }

  .flex1 text {
    line-height: 55px;
  }

  .gray-font {
    color: #666;
  }

  .fix-btn {
    margin: 100px 0 20px;
    width: 100%;
  }

  .fix-btn .btn {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .green-font {
    color: #2C9D23;
  }

  .gray001-font {
    color: #ddd;
  }

  .red-font {
    color: #FF5E5E;
  }

  .otherpay text {
    line-height: 120px;
  }

  .payment {
    padding: 0 3%;
    height: 120px;
    line-height: 120px;
    border-bottom: 2px solid #DDDDDD;
    font-size: 30px;
    color: #333333;
  }

  .payment-label, .but {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .gray {
    color: #999
  }

  .icon {
    width: 50px;
    height: 50px;
    margin-right: 20px;
  }

  .select {
    width: 48px;
    height: 48px;
  }

  .disabled {
    border-radius: 24px;
    background: #E7E7E7;
  }
</style>
